<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>中国房源和二手房数据地图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 显示加载动画
        myChart.showLoading();

        // 中国各省的数据
        var chinaData = [
            ["省份", "房源总数", "二手房数量"],
            ["北京市", 50000, 15000],
            ["上海市", 60000, 20000],
            ["广东省", 70000, 30000],
            ["江苏省", 55000, 18000],
            ["浙江省", 65000, 22000],
            ["山东省", 60000, 25000], // 山东省数据
            // ... 其他省份数据
        ];

        // 山东省各市的数据
        var shandongData = [
            ["城市", "房源总数", "二手房数量"],
            ["济南市", 20000, 8000],
            ["青岛市", 18000, 7000],
            ["烟台市", 16000, 6000],
            ["潍坊市", 14000, 5000],
            ["淄博市", 12000, 4000],
            // ... 山东其他城市数据
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 地区名称
                        value: row[1],  // 房源总数
                        secondHandHouse: row[2]  // 二手房数量
                    });
                }
            }
            return data;
        }

        // 初始化中国地图
        function initChinaMap(data) {
            myChart.hideLoading();

            // 使用中国地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('china', geoJson);

                    myChart.setOption({
                        title: {
                            text: '中国各省房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var secondHandHouse = params.data && params.data.secondHandHouse != null ? params.data.secondHandHouse : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                       '房源总数: ' + totalValue + '<br/>' +
                                       '二手房数量: ' + secondHandHouse;
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 70000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'china',
                                label: {
                                    show: true
                                },
                                data: data
                            }
                        ]
                    });

                    // 点击事件，进入山东省地图
                    myChart.on('click', function (params) {
                        if (params.name === '山东省') {
                            initShandongMap(parseData(shandongData)); // 切换到山东省地图
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 初始化山东省地图
        function initShandongMap(data) {
            myChart.showLoading();

            // 使用山东省地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json') // 山东省地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('shandong', geoJson);

                    myChart.hideLoading();

                    myChart.setOption({
                        title: {
                            text: '山东省各市房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var secondHandHouse = params.data && params.data.secondHandHouse != null ? params.data.secondHandHouse : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                       '房源总数: ' + totalValue + '<br/>' +
                                       '二手房数量: ' + secondHandHouse;
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 20000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'shandong',
                                label: {
                                    show: true
                                },
                                data: data
                            }
                        ]
                    });

                    // 可以继续监听点击事件，如果需要点击市切换到区等更深层级
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化中国地图
        var parsedChinaData = parseData(chinaData);
        initChinaMap(parsedChinaData);

    </script>
</body>
</html>
